<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>资讯列表</title>
    <!--标准mui.css-->
	<link rel="stylesheet" href="/weixin/css/mui.min.css">
	<style type="text/css">
	
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
	    <h1 id="headerTitle" class="mui-title">资讯</h1>
	</header>
	<div class="mui-content">
		<div id="threeSliderNavig" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-positive">
				<a class="mui-control-item" href="gov-list.html">
					政府
				</a>
				<a class="mui-control-item" href="scenic-list.html">
					景区
				</a>
				<a class="mui-control-item" href="shopping-list.html">
					商家
				</a>
			</div>
			
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
		</div>
			
	</div>
</body>
	<script src="/weixin/js/mui.min.js"></script>
    <script>
      	mui.init();
		var subpages = ['gov-list.html', 'scenic-list.html', 'shopping-list.html'];
		var subpage_style = {
			top: '40px',
			bottom: '0px'
		};
		var aniShow = {};
			
		 //创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < 3; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				}else{
					temp[subpages[i]] = "true";
					mui.extend(aniShow,temp);
				}
				self.append(sub);
			}
		});
		
		//当前激活选项
		var activeTab = subpages[0];
		 //选项卡点击事件
		mui('#threeSliderNavig').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
//				alert(targetTab == activeTab);
				return;
			}
			//选项卡下面的图标走动
			if(targetTab==subpages[0]){
				document.getElementById("sliderProgressBar").style.marginLeft="0%";
			}else if(targetTab==subpages[1]){
				document.getElementById("sliderProgressBar").style.marginLeft="33.3%";
			}else{
				document.getElementById("sliderProgressBar").style.marginLeft="66.6%";
			}
			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
    </script>
</html>